import { Collapse } from 'antd';
import UseCallback from './components/UseCallback'
import UseEffect from './components/UseEffect'
import UseMemo from './components/UseMemo'
import UseRef from './components/UseRef'
import { useEffect, useState } from 'react';
import Prism from 'prismjs';
import text from './components'
// 父组件
function ReactHooks(props) {
  const [UseCallbackText, setUseCallbackText] = useState('')
  const [UseEffectText, setUseEffectText] = useState('')
  const [UseMemoText, setUseMemoText] = useState('')
  const [UseRefText, setUseRefText] = useState('')

  useEffect(() => {
    const UseCallbackText = Prism.highlight(text.UseCallbackText, Prism.languages.javascript, 'javascript')
    const UseEffectText = Prism.highlight(text.UseEffectText, Prism.languages.javascript, 'javascript')
    const UseMemoText = Prism.highlight(text.UseMemoText, Prism.languages.javascript, 'javascript')
    const UseRefText = Prism.highlight(text.UseRefText, Prism.languages.javascript, 'javascript')
    setUseCallbackText(UseCallbackText)
    setUseEffectText(UseEffectText)
    setUseMemoText(UseMemoText)
    setUseRefText(UseRefText)
  }, [])
  // 现在有个情况就是我只修改了父组件的参数  但是子组件全部更新了  这样是很费性能的这样我可以用useCallback或者 useMemo
  // 1、useMemo: useMemo和useEffect有点类似 也是说指定那些参数改变后才会执行里面的方法 有点类似vue的计算属性
  // 2、useEffect 里面的参数有两个一个是callabck回调一个是一个数组 数组里面放入我们需要监听的数据 如果是空数组则只会执行一次
  // 3、useRef需要配合forwardRef一起使用 也可以直接定义 因为使用useState可能不会实时  可以获取htmldom和子组件的参数 
  // 4、useCallback：我现在只想如果只是父组件的参数发生了改变不想去重新渲染子组件 配合memo使用只有点击修改指定在第二个数组里面的才会去调用
  // 总结：useCallback与useMemo的区别在于useMemo不需要配合memo来使用 useMemo类似于监听并且会有返回值 useCallback是配合memo来一起使用 memo主要是只有当前组件值发生变化才会渲染提高性能 返回出去的方法用useCallback包起来后第二个参数数组，里面的数据方法变化才会去调用
  return (
     <div>
       <Collapse defaultActiveKey={[1,2,3,4]} >
        <Collapse.Panel header="useMemo" key="1">
          <UseMemo></UseMemo>
          <pre style={{ whiteSpace: 'pre-wrap' }} dangerouslySetInnerHTML={{ __html: UseMemoText }}>
          </pre>
        </Collapse.Panel>
        <Collapse.Panel header="useEffect" key="2">
          <UseEffect></UseEffect>
          <pre style={{ whiteSpace: 'pre-wrap' }} dangerouslySetInnerHTML={{ __html: UseEffectText }}>
          </pre>
        </Collapse.Panel>
        <Collapse.Panel header="useRef" key="3">
          <UseRef></UseRef>
          <pre style={{ whiteSpace: 'pre-wrap' }} dangerouslySetInnerHTML={{ __html: UseRefText }}>
          </pre>
        </Collapse.Panel>
        <Collapse.Panel header="useCallback" key="4">
          <UseCallback></UseCallback>
          <pre style={{ whiteSpace: 'pre-wrap' }} dangerouslySetInnerHTML={{ __html: UseCallbackText }}>
          </pre>
        </Collapse.Panel>
      </Collapse>
     </div>
  )
}
export default ReactHooks